<template>
  <a-tree-select
    style="width: 100%"
    class="sa-select-tree"
    :value="value"
    :tree-data="dataSource"
    :placeholder="placeholder"
    :show-search="showSearch"
    :allow-clear="allowClear"
    :replace-fields="replaceFields"
    :dropdown-style="dropdownStyle"
    :get-popup-container="
      triggerNode => { return triggerNode.parentNode || document.body;}
    "
    :filter-tree-node="filterTreeNode"
    :tree-checkable="treeCheckable"
    :tree-expanded-keys="treeExpandedKeys" 
    @change="handleChange"
    @select="handleSelect"
    @treeExpand="handleTreeExpand"
  >
  </a-tree-select>
</template>

<script>
import { isArray } from '@/utils/validate'

const DEFAULT_REPLACE_FIELDS = {
  children:'children', 
  title:'title', 
  key:'key', 
  value: 'value'
}

export default {
  name: 'SaSelectTree',
  model: {
    prop: 'defaultValue',
    event: 'change'
  },
  props: {
    defaultValue: {
      type: [String, Array, Number], required: false
    },
    dataSource: {
      type: [Array], required: false
    },
    disabled: {
      type: Boolean, default: false
    },
    placeholder: {
      type: String, default: '请选择'
    },
    showSearch: {
      type: Boolean, default: false
    },
    allowClear: {
      type: Boolean, default: false
    },
    replaceFields: {
      type: [String, Object],
      default: () => {
        return DEFAULT_REPLACE_FIELDS
      }
    },
    treeDataSimpleMode: {
      type: Boolean, default: false
    },
    treeDefaultExpandAll: {
      type: Boolean, default: false
    },
    treeCheckable: {
      type: Boolean, default: false
    }
  },
  data() {
    return {
      value: undefined,
      treeExpandedKeys: [],
      dropdownStyle: {
        maxHeight: '400px', overflow: 'auto'
      },
    }
  },
  computed: {
  },
  watch: {
    defaultValue: {
      deep: true,
      immediate: true,
      handler (value, oldValue) {
        this.value = value
        this.dealTreeExpandKeys(value)
      }
    }
  },
  created () {
  },
  methods: {
    handleChange (value, label, extra) {
      this.value = value
      this.$emit('change', value, label, extra)
    },
    handleSelect (value, node, extra) {
      this.$emit('select', value, node, extra)
    },
    handleTreeExpand (expandedKeys) {
      this.treeExpandedKeys = expandedKeys
    },
    dealTreeExpandKeys (value) {
      if (value) {
        const { dataSource, replaceFields: { key } } = this
        const treeExpandKeys = filterTreeExpandKeys(dataSource, key, value)
        this.treeExpandedKeys = treeExpandKeys
      } else {
        this.treeExpandedKeys = []
      }
    },
    filterTreeNode(value, treeNode) {
      if (!value) return true
      return treeNode.data.props.title.indexOf(value) !== -1
    }
  },
}
/**
 * 
 * @param dataSource
 * 
 */
function filterTreeExpandKeys (dataSource, key, value, res = []) {
  if (!dataSource) return []
  for (const data of dataSource) {
    res.push(data[key])
    if (isArray(value)) {
      if (value.indexOf(data[key]) > -1) return res
    } else {
      if (data[key] === value) return res
    }
    if (data.children) {
      const findChildren = filterTreeExpandKeys(data.children, key, value, res)
      if (findChildren.length > 0) return findChildren
    }
    res.pop()
  }
  return []
};

</script>

<style lang="scss" scoped>

</style>